<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquickitemanimation.cpp -->
  <title>PathAnimation QML 类型 | Qt Quick 5.12.3</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.12</a></td><td ><a href="qtquick-index.html">Qt Quick 模块</a></td><td ><a href="qtquick-qmlmodule.html">QML类型</a></td><td >PathAnimation QML 类型</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.3 参考指南</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">目录</a></h3>
<ul>
<li class="level1"><a href="#properties">属性</a></li>
<li class="level1"><a href="#details">详细信息</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">PathAnimation QML 类型</h1>
<span class="subtitle"></span>
<!-- $$$PathAnimation-brief -->
<p>Animates an item along a path. <a href="#details">更多...</a></p>
<!-- @@@PathAnimation -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> 导入语句：</td><td class="memItemRight bottomAlign"> import QtQuick 2.12</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Since:</td><td class="memItemRight bottomAlign">  Qt 5.0</td></tr><tr><td class="memItemLeft rightAlign topAlign">继承自：</td><td class="memItemRight bottomAlign"> <p><a href="qml-qtquick-animation.html">Animation</a></p>
</td></tr></table></div><ul>
<li><a href="qml-qtquick-pathanimation-members.html">所有成员的列表，包括继承成员</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">属性</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#anchorPoint-prop">anchorPoint</a></b></b> : point</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#duration-prop">duration</a></b></b> : int</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing-prop">easing</a></b></b><ul>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing.type-prop">easing.type</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing.amplitude-prop">easing.amplitude</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing.bezierCurve-prop">easing.bezierCurve</a></b></b> : list&lt;real&gt;</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing.overshoot-prop">easing.overshoot</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#easing.period-prop">easing.period</a></b></b> : real</li>
</ul>
</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#endRotation-prop">endRotation</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#orientation-prop">orientation</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#orientationEntryDuration-prop">orientationEntryDuration</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#orientationExitDuration-prop">orientationExitDuration</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#path-prop">path</a></b></b> : Path</li>
<li class="fn"><b><b><a href="qml-qtquick-pathanimation.html#target-prop">target</a></b></b> : Item</li>
</ul>
<!-- $$$PathAnimation-description -->
<a name="details"></a>
<h2 id="details">详细信息</h2>
<p>When used in a transition, the path can be specified without start or end points, for example:</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-pathanimation.html">PathAnimation</a></span> {
      <span class="name">path</span>: <span class="name">Path</span> {
          <span class="comment">//no startX, startY</span>
          <span class="type"><a href="qml-qtquick-pathcurve.html">PathCurve</a></span> { <span class="name">x</span>: <span class="number">100</span>; <span class="name">y</span>: <span class="number">100</span>}
          <span class="type"><a href="qml-qtquick-pathcurve.html">PathCurve</a></span> {}    <span class="comment">//last element is empty with no end point specified</span>
      }
  }

</pre>
<p>In the above case, the path start will be the item's current position, and the path end will be the item's target position in the target state.</p>
<p><b>请参考 </b><a href="qtquick-statesanimations-animations.html">Animation 和 Transitions in Qt Quick</a> 和 <a href="qtquick-animation-example.html#pathinterpolator">PathInterpolator</a>。</p>
<!-- @@@PathAnimation -->
<h2>属性文档</h2>
<!-- $$$anchorPoint -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="anchorPoint-prop">
<td class="tblQmlPropNode"><p>
<a name="anchorPoint-prop"></a><span class="name">anchorPoint</span> : <span class="type"><a href="../qtqml/qml-point.html">point</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the anchor point for the item being animated.</p>
<p>By default, the upper-left corner of the target (its 0,0 point) will be anchored to (or follow) the path. The anchorPoint property can be used to specify a different point for anchoring. For example, specifying an anchorPoint of 5,5 for a 10x10 item means the center of the item will follow the path.</p>
</div></div><!-- @@@anchorPoint -->
<br/>
<!-- $$$duration -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="duration-prop">
<td class="tblQmlPropNode"><p>
<a name="duration-prop"></a><span class="name">duration</span> : <span class="type"><a href="../qtqml/qml-int.html">int</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the duration of the animation, in milliseconds.</p>
<p>The default value is 250.</p>
</div></div><!-- @@@duration -->
<br/>
<!-- $$$easing -->
<div class="qmlitem"><div class="qmlproto"><div class="table"><table class="qmlname"><tr valign="top" class="even" id="easing-prop"><th class="centerAlign"><p><a name="easing-prop"></a><b>easing group</b></p></th></tr><tr valign="top" class="odd" id="easing.type-prop"><td class="tblQmlPropNode"><p><a name="easing.type-prop"></a><span class="name">easing.type</span> : <span class="type"><a href="../qtqml/qml-enumeration.html">enumeration</a></span></p></td></tr><tr valign="top" class="odd" id="easing.amplitude-prop"><td class="tblQmlPropNode"><p><a name="easing.amplitude-prop"></a><span class="name">easing.amplitude</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr><tr valign="top" class="odd" id="easing.bezierCurve-prop"><td class="tblQmlPropNode"><p><a name="easing.bezierCurve-prop"></a><span class="name">easing.bezierCurve</span> : <span class="type"><a href="../qtqml/qml-list.html">list</a></span>&lt;<span class="type"><a href="../qtqml/qml-real.html">real</a></span>&gt;</p></td></tr><tr valign="top" class="odd" id="easing.overshoot-prop"><td class="tblQmlPropNode"><p><a name="easing.overshoot-prop"></a><span class="name">easing.overshoot</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr><tr valign="top" class="odd" id="easing.period-prop"><td class="tblQmlPropNode"><p><a name="easing.period-prop"></a><span class="name">easing.period</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr></table></div></div><div class="qmldoc"><p>the easing curve used for the animation.</p>
<p>To specify an easing curve you need to specify at least the type. For some curves you can also specify amplitude, period, overshoot or custom bezierCurve data. The default easing curve is <code>Easing.Linear</code>.</p>
<p>See the <a href="qml-qtquick-propertyanimation.html#easing.type-prop">PropertyAnimation::easing.type</a> documentation for information about the different types of easing curves.</p>
</div></div><!-- @@@easing -->
<br/>
<!-- $$$endRotation -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="endRotation-prop">
<td class="tblQmlPropNode"><p>
<a name="endRotation-prop"></a><span class="name">endRotation</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the ending rotation for the target.</p>
<p>If an orientation has been specified for the <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>, and the path doesn't end with the item at the desired rotation, the endRotation property can be used to manually specify an end rotation.</p>
<p>This property is typically used with <a href="qml-qtquick-pathanimation.html#orientationExitDuration-prop">orientationExitDuration</a>, as specifying an endRotation without an <a href="qml-qtquick-pathanimation.html#orientationExitDuration-prop">orientationExitDuration</a> may cause a jump to the final rotation, rather than a smooth transition.</p>
</div></div><!-- @@@endRotation -->
<br/>
<!-- $$$orientation -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="orientation-prop">
<td class="tblQmlPropNode"><p>
<a name="orientation-prop"></a><span class="name">orientation</span> : <span class="type"><a href="../qtqml/qml-enumeration.html">enumeration</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property controls the rotation of the item as it animates along the path.</p>
<p>If a value other than <code>Fixed</code> is specified, the <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a> will rotate the item to achieve the specified orientation as it travels along the path.</p>
<ul>
<li><a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.Fixed (default) - the <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a> will not control the rotation of the item.</li>
<li><a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.RightFirst - The right side of the item will lead along the path.</li>
<li><a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.LeftFirst - The left side of the item will lead along the path.</li>
<li><a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.BottomFirst - The bottom of the item will lead along the path.</li>
<li><a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>.TopFirst - The top of the item will lead along the path.</li>
</ul>
</div></div><!-- @@@orientation -->
<br/>
<!-- $$$orientationEntryDuration -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="orientationEntryDuration-prop">
<td class="tblQmlPropNode"><p>
<a name="orientationEntryDuration-prop"></a><span class="name">orientationEntryDuration</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the duration (in milliseconds) of the transition in to the orientation.</p>
<p>If an orientation has been specified for the <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>, and the starting rotation of the item does not match that given by the orientation, orientationEntryDuration can be used to smoothly transition from the item's starting rotation to the rotation given by the path orientation.</p>
</div></div><!-- @@@orientationEntryDuration -->
<br/>
<!-- $$$orientationExitDuration -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="orientationExitDuration-prop">
<td class="tblQmlPropNode"><p>
<a name="orientationExitDuration-prop"></a><span class="name">orientationExitDuration</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the duration (in milliseconds) of the transition out of the orientation.</p>
<p>If an orientation and <a href="qml-qtquick-pathanimation.html#endRotation-prop">endRotation</a> have been specified for the <a href="qtquick-animation-example.html#pathanimation">PathAnimation</a>, orientationExitDuration can be used to smoothly transition from the rotation given by the path orientation to the specified <a href="qml-qtquick-pathanimation.html#endRotation-prop">endRotation</a>.</p>
</div></div><!-- @@@orientationExitDuration -->
<br/>
<!-- $$$path -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="path-prop">
<td class="tblQmlPropNode"><p>
<a name="path-prop"></a><span class="name">path</span> : <span class="type"><a href="qml-qtquick-path.html">Path</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the path to animate along.</p>
<p>For more information on defining a path see the <a href="qml-qtquick-path.html">Path</a> documentation.</p>
</div></div><!-- @@@path -->
<br/>
<!-- $$$target -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="target-prop">
<td class="tblQmlPropNode"><p>
<a name="target-prop"></a><span class="name">target</span> : <span class="type"><a href="qml-qtquick-item.html">Item</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the item to animate.</p>
</div></div><!-- @@@target -->
<br/>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
